@import '../../styles/base.scss';
@import '../../styles/style.scss';

.marked {
  word-break: break-all;

  h2,
  h3,
  h4,
  h5 {
    margin-top: 0;
    margin-bottom: 15px;
    color: $textColor;
    font-weight: 700;
  }
  h5 {
    font-size: 22px;
  }
  h4 {
    font-size: 24px;
  }
  h3 {
    font-size: 26px;
  }
  h2 {
    font-size: 28px;
  }
  h2:before {
    content: '✒️';
  }
  h3:before {
    content: '✏️';
  }
  h4:before {
    content: '📌';
  }
  h5:before {
    content: '🏷️';
  }

  p {
    margin-bottom: 20px;
  }

  strong {
    color: $hoverColor;
  }
  code {
    background-color: $inlineCode;
    font-family: 'dengxian';
    padding: 3px 8px;
    border-radius: 8px;
    margin: 0 2px;
  }

  p img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 12px;
  }

  blockquote {
    background-color: $themeColor1;
    padding: 14px 40px;
    font-size: 18px;
    border-radius: 20px;
    border: 2px $hoverColor dashed;
  }
  blockquote p {
    margin: 0;
  }

  table {
    margin: 20px auto;
    border: 2px solid rgb(120, 120, 120);
    background-color: $themeColor1;
    border-spacing: 0; /*去掉单元格间隙*/
    text-align: center;
  }
  table th,
  table td {
    padding: 6px 14px;
    border: 1px solid rgb(120, 120, 120);
  }

  a {
    font-weight: 700;
    text-decoration: underline !important;
    margin: 0 4px;
    color: $hoverColor;
    @extend .trans;
  }
  a:hover {
    color: red;
  }

  hr {
    margin: 20px 0;
  }
}

@media screen and (max-width: 1240px) {
  .marked {
    h2,
    h3,
    h4,
    h5 {
      margin-bottom: 8rem;
    }

    h5 {
      font-size: 20rem;
    }
    h4 {
      font-size: 22rem;
    }
    h3 {
      font-size: 24rem;
    }
    h2 {
      font-size: 26rem;
    }

    p {
      margin-bottom: 10rem;
      line-height: 26rem;
    }

    code {
      padding: 2rem 6rem;
      border-radius: 6rem;
      margin: 0 2rem;
    }

    p img {
      border-radius: 8rem;
    }

    blockquote {
      padding: 6rem 20rem;
      font-size: 16rem;
      border-radius: 10rem;
      border: 2rem $hoverColor dashed;
    }

    table {
      margin: 10rem auto;
      border: 1rem solid rgb(120, 120, 120);
      font-size: 16rem;
    }
    table th,
    table td {
      padding: 3rem 8rem;
      border: 1rem solid rgb(120, 120, 120);
    }

    a {
      margin: 0 2rem;
    }
    hr {
      margin: 10rem 0;
    }
  }
}
